<template>
  <!--  -->
  <view class="wallet">
    <view
      class="wallet-header"
      :style="{
        'background-image': `url(${getImgSrc('/user/wallet_bg@2x.png')})`,
      }"
    >
      <wallet-nav title="钱包" :styles="{'padding-top':`${vuex_safeArea.top}px`}" />

      <view class="wallet-info">
        <view class="wallet-info-tip">余额（元）</view>
        <view class="wallet-info-amount">{{ wallet.toFixed(2) }}</view>
      </view>
    </view>
    <view class="wallet-content">
      <view class="wallet-item" @tap="triggerToNavigate('/pages/sys/user/wallet-list')">
        <image :src="getImgSrc('/user/icon_ye@2x.png')" mode="widthFix" />
        <view>余额明细</view>
      </view>
      <view class="wallet-item" @tap="triggerToNavigate('/pages/sys/user/withdrawal')">
        <image :src="getImgSrc('/user/icon_tx@2x.png')" mode="widthFix" />
        <view>去提现</view>
      </view>
    </view>
  </view>
</template>
<script>
import walletNav from "@/components/layout/nav.vue";

export default {
  name: "wallet",
  components: {
    walletNav,
  },
  data() {
    return {
      wallet: 0,
    };
  },
  onLoad(option) {
  },
  onShow() {
    this.triggerToFetch();
  },
  watch: {},
  methods: {
    triggerToNavigate(url) {
      uni.navigateTo({
        url,
      });
    },
    async triggerToFetch() {
      // 获取钱包余额
      this.$u.api.queryWallet().then((res) => {
        this.wallet = res.data.current;
      });
    },
  },
};
</script>
<style lang="scss">
.wallet {
  &-header {
    background-position: bottom;
    background-size: 750rpx 512rpx;

    width: 750rpx;
    height: 512rpx;
    position: relative;
  }

  &-info {
    position: absolute;
    bottom: 190rpx;
    width: 100%;
    text-align: center;

    &-tip {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 36rpx;
      opacity: 0.5;
    }

    &-amount {
      margin-top: 26rpx;
      font-size: 70rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 75rpx;
    }
  }

  &-content {
    position: relative;
    margin: -112rpx auto;
    width: 650rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 0rpx -20rpx 82rpx 16rpx rgba(112, 112, 112, 0.21);
    border-radius: 40rpx;
    display: flex;
    z-index: 99;
    padding: 46rpx;

    &::after {
      content: " ";
      width: 1rpx;
      height: 47rpx;
      background: #cbd5dc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &-item {
    flex: 0 0 50%;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4c5566;
    line-height: 36rpx;

    image {
      width: 54rpx;
      height: 54rpx;
    }
  }
}
</style>
